<div class="clr-row" style="padding-left: 20px">
  <div class="clr-row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
    <h3 class="header-title">{{'SECRET.CREATE_TMP' | translate}}</h3>
  </div>
  <form [formGroup]="currentForm" clrForm clrLayout="horizontal" style="width: 100%;">
    <wayne-box class="form-block wrap">
      <div class="clr-form-control clr-row" *ngIf="clusters" formArrayName="clusters">
        <label class="clr-control-label required">{{'TITLE.CLUSTER' | translate}}</label>
        <span class="warning-text" *ngIf="!clusters || clusters && clusters.length === 0">{{'SECRET.CREATE_EDIT.CLUSTER_MESSAGE' | translate}}</span>
        <div class="clr-control-container  clr-col-md-10 clr-col-12">
          <div class="clr-checkbox-wrapper" style="display: inline-block;" *ngFor="let cluster of clusters;let i=index"
            [formGroupName]="i">
            <input formControlName="checked" class="clr-checkbox" type="checkbox" id="{{cluster.id}}-check">
            <label for="{{cluster.id}}-check">{{cluster.name}}</label>
          </div>
        </div>
      </div>
      <clr-textarea-container>
        <label class="required">{{'TEMPLATE.RELEASE_EXPLAIN' | translate}}</label>
        <textarea clrTextarea formControlName="description" rows="3" style="width: 65%" required>
                      </textarea>
        <clr-control-error>description is required</clr-control-error>
      </clr-textarea-container>
      <div class="clr-form-control clr-row">
        <label class="clr-control-label required">
          {{'TEMPLATE.TYPE' | translate}}
          <a style="" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
            <clr-icon shape="info-circle" size="24"></clr-icon>
            <span class="tooltip-content">
              类型说明：
              Opaque: 用户自定义数据
              <br>
              kubernetes.io/dockerconfigjson: ~/.docker/config.json格式
              <br>
              kubernetes.io/dockercfg: ~/.dockercfg 格式
              <br>
              kubernetes.io/service-account-token: 定义 service-account
              <br>
              kubernetes.io/basic-auth: 定义 basic authentication
              <br>
              kubernetes.io/ssh-auth: 定义 SSH authetication 认证
              <br>
              kubernetes.io/tls: SecretTypeTLS包含有关TLS客户端或服务器机密的信息。 它主要用于Ingress资源的TLS终止，但也可以用于其他类型。
              <br>
            </span>
          </a>
        </label>
        <div class="clr-control-container clr-col-md-10 clr-col-12">
          <div class="clr-select-wrapper">
            <select class="clr-select" formControlName="type" required>
              <option value="Opaque" selected>Opaque</option>
              <option value="kubernetes.io/dockerconfigjson">kubernetes.io/dockerconfigjson</option>
              <option value="kubernetes.io/dockercfg">kubernetes.io/dockercfg</option>
              <option value="kubernetes.io/service-account-token">kubernetes.io/service-account-token</option>
              <option value="kubernetes.io/basic-auth">kubernetes.io/basic-auth</option>
              <option value="kubernetes.io/ssh-auth">kubernetes.io/ssh-auth</option>
              <option value="kubernetes.io/tls">kubernetes.io/tls</option>
            </select>
          </div>
        </div>
      </div>
      <ng-container formArrayName="datas">
        <div class="clr-form-control clr-row" *ngFor="let data of datas.controls; let i = index" [formGroupName]="i">
          <label class="clr-control-label required">{{'MESSAGE.DATA_CONTENT' | translate}}</label>
          <div class="clr-control-container">
            <div class="clr-input-wrapper">
              <input type="text" class="clr-input" size="45" formControlName="dataName" required [placeholder]="'PLACEHOLDER.CONFIG_KEY' | translate">
              <a href="javascript:void(0)">
                <clr-icon (click)="onDeleteData(i)" shape="trash" [title]="'ACTION.DELETE_DATA' | translate" class="is-solid clr-icon"></clr-icon>
              </a>
              <a href="javascript:void(0)">
                <clr-icon (click)="onAddData(i)" shape="plus-circle" [title]="'ACTION.ADD_DATA' | translate" class="is-solid clr-icon"></clr-icon>
              </a>
            </div>
            <div class="clr-textarea-wrapper">
              <textarea class="clr-textarea" style="width: 65%" formControlName="dataValue" required [placeholder]="'PLACEHOLDER.CONFIG_VALUE' | translate"></textarea>
            </div>
          </div>
        </div>
      </ng-container>
    </wayne-box>
  </form>
</div>
<div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
  <button type="button" class="btn btn-primary" [disabled]="!isValid"
          (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
</div>
<wayne-ace-editor (outputObj)="saveSecretTpl($event)"></wayne-ace-editor>
